<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
    <th:block th:include="include :: header('用户行为分析统计')"/>
    <style type="text/css">
        .container-div {
            padding: 16px;
        }
        .select-table{
            margin-bottom: 0;
            padding: 0;
            background: none;
        }
        .echarts{
            height: 240px;
        }
        .fixed-table-toolbar {
            display: none;
        }
    </style>
</head>
<body class="body-dark">
<div class="container-div">
    <div class="row">
        <div class="col-sm-12">
            <div class="nbox nbox_border1">
                <ul class="fillet">
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                </ul>
                <div class="nbox-inner">
                    <div class="nbox-hd">
                        <div class="title">登录用户数、系统访问量折线图</div>
                        <div class="caption">
                            <form id="dateForm" style="font-size: 0">
                                <div class="form-group" style="margin: 0;display: inline-flex;">
                                    <div class="input-daterange input-group">
                                        <span class="input-group-addon">日期范围选择：</span>
                                        <input type="text" class="input-sm form-control" name="startTime"
                                               id="startTime" placeholder="yyyy-MM-dd"/>
                                        <span class="input-group-addon" style="border-left: none;border-right: none">到</span>
                                        <input type="text" class="input-sm form-control" name="enfTime" id="endTime"
                                               placeholder="yyyy-MM-dd"/>
                                    </div>
                                    <button type="button" class="btn btn-primary ms-1" onclick="search()">查询
                                    </button>
                                    <button type="button" class="btn btn-primary  ms-1" onclick="reset()">重置
                                    </button>
                                </div>
                            </form>
                        </div>
                    </div>
                    <div class="nbox__bd">
                        <div class="echarts" id="echarts-line-chart"></div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-sm-6">
            <div class="nbox nbox_border1">
                <ul class="fillet">
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                </ul>
                <div class="nbox-inner">
                    <div class="nbox-hd">
                        <div class="title">登录时间段统计</div>
                    </div>
                    <div class="nbox__bd">
<!--                        <div class="echarts" id="bytimeLogin-charts"></div>-->
                        <div class="echarts" id="echarts-userByTime-chart"></div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-sm-6">
            <div class="nbox nbox_border1">
                <ul class="fillet">
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                </ul>
                <div class="nbox-inner">
                    <div class="nbox-hd">
                        <div class="title">系统热门访问模块TOP3</div>
                    </div>
                    <div class="nbox__bd">
                        <div class="echarts" id="echarts-sbzlzhu-chart"></div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-sm-6">
            <div class="nbox nbox_border1">
                <ul class="fillet">
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                </ul>
                <div class="nbox-inner">
                    <div class="nbox-hd">
                        <div class="title">分用户登录量统计</div>
                    </div>
                    <div class="nbox__bd">
                        <div class="echarts" id="echarts-byuser-chart"></div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-sm-6">
            <div class="nbox nbox_border1">
                <ul class="fillet">
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                </ul>
                <div class="nbox-inner">
                    <div class="nbox-hd">
                        <div class="title">登录数、访问量、系统模块操作数统计</div>
                    </div>
                    <div class="nbox__bd">
                        <div class="echarts" id="echarts-fwl-chart"></div>
                    </div>
                </div>
            </div>
        </div>


</div>
</div>
</body>

<th:block th:include="include :: footer"/>
<th:block th:include="include :: echarts-js"/>
<th:block th:include="include :: datetimepicker-js"/>
<script th:inline="javascript">
    var dayLoginCountArray = [[${dayLoginCountArray}]];
    var rqArray = [[${rqArray}]];
    var dayVisitCountArray = [[${dayVisitCountArray}]];
    var keyData = [[${keyData}]];
    var valueData = [[${valueData}]];

    var alarmData = [[${alarmData}]];
    var alarmAndWaringValueData = [[${alarmAndWaringValueData}]];

    var loginTotal = [[${loginTotal}]];
    var loginAndVistorTotalValueData = [[${loginAndVistorTotalValueData}]];
    var operNames = [[${operNames}]];
    var operCount = [[${operCount}]];



    $(function () {
        top3();  //登录、访问量 top3
        login_visit_chart();//登录、访问量统计图
        byuser_chart();  // 分用户登录量饼图
        //bytimeLoginChart();  //分时间段统计柱状图
        userByTimePieChart();
        initeEcharts(['登录用户数', '系统访问量'],dayLoginCountArray,dayVisitCountArray,rqArray);  //typeArray, h5Array, pcArray, dateArray
        layui.use('laydate', function () {
            var laydate = layui.laydate;
            var startDate = laydate.render({
                elem: '#startTime',
                max: $('#endTime').val(),
                theme: 'molv',
                trigger: 'click',
                done: function (value, date) {
                    // 结束时间大于开始时间
                    if (value !== '') {
                        endDate.config.min.year = date.year;
                        endDate.config.min.month = date.month - 1;
                        endDate.config.min.date = date.date;
                    } else {
                        endDate.config.min.year = '';
                        endDate.config.min.month = '';
                        endDate.config.min.date = '';
                    }
                }
            });
            var endDate = laydate.render({
                elem: '#endTime',
                min: $('#startTime').val(),
                theme: 'molv',
                trigger: 'click',
                done: function (value, date) {
                    // 开始时间小于结束时间
                    if (value !== '') {
                        startDate.config.max.year = date.year;
                        startDate.config.max.month = date.month - 1;
                        startDate.config.max.date = date.date;
                    } else {
                        startDate.config.max.year = '';
                        startDate.config.max.month = '';
                        startDate.config.max.date = '';
                    }
                }
            });
        });
    });

    function login_visit_chart() { //登录、访问量统计图
        var shzlChart = echarts.init(document.getElementById("echarts-fwl-chart"));
        var option = {
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            xAxis: {
                type: 'category',
                axisLabel: {
                    color: '#999',
                },
                data: loginTotal
            },
            yAxis: {
                type: 'value',
                axisLabel: {
                    color: '#999',
                },
                axisLine: {
                    show: true,
                    lineStyle: {
                        color: 'rgba(255,255,255,0.12)',
                    }
                },
                splitLine: {
                    show: true,
                    lineStyle: {
                        color: 'rgba(255,255,255,0.12) ',
                    }
                },
            },
            "color": ['#1e91ff', '#975fe4', '#f2637b', '#fad337', "#4dcb73", "#13c2c2"],
            series: [
                {
                    data: loginAndVistorTotalValueData,
                    type: 'bar',
                    showBackground: true,
                    backgroundStyle: {
                        color: 'rgba(180, 180, 180, 0.2)'
                    }
                }
            ]
        };
        shzlChart.setOption(option);
        $(window).resize(shzlChart.resize);
    }


    function top3() {
        var shzlChart = echarts.init(document.getElementById("echarts-sbzlzhu-chart"));
        var option = {
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            xAxis: {
                type: 'category',
                axisLabel: {
                    color: '#999',
                },
                data: keyData
            },
            yAxis: {
                type: 'value',
                axisLabel: {
                    color: '#999',
                },
                axisLine: {
                    show: true,
                    lineStyle: {
                        color: 'rgba(255,255,255,0.12)',
                    }
                },
                splitLine: {
                    show: true,
                    lineStyle: {
                        color: 'rgba(255,255,255,0.12) ',
                    }
                },
            },
            "color": ['#1e91ff', '#975fe4', '#f2637b', '#fad337', "#4dcb73", "#13c2c2"],
            series: [
                {
                    data: valueData,
                    type: 'bar',
                    showBackground: true,
                    backgroundStyle: {
                        color: 'rgba(180, 180, 180, 0.2)'
                    }
                }
            ]
        };
        shzlChart.setOption(option);
        $(window).resize(shzlChart.resize);
    }
    function initeEcharts(typeArray, loginArray, visitArray,dateArray) {
        var lineChart = echarts.init(document.getElementById("echarts-line-chart"));
        var lineoption = {
            title: {
               // text: '每日登录、访问数量'
            },
            tooltip: {
                trigger: 'axis'
            },
            legend: {
                data: typeArray,
                left: 'center',
                textStyle: {
                    color: '#fff',
                    fontSize: 14
                }
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            calculable: true,
            xAxis: [
                {
                    type: 'category',
                    boundaryGap: false,
                    axisLabel: {
                        color: '#999',
                    },
                    data: dateArray
                }
            ],
            yAxis: [

                {
                    type: 'value',
                    axisLabel: {
                        color: '#999',
                    },
                axisLine: {
            show: true,
                lineStyle: {
                color: 'rgba(255,255,255,0.12)',
            }
        },
        splitLine: {
            show: true,
                lineStyle: {
                color: 'rgba(255,255,255,0.12) ',
            }
        },
                }
            ],
            "color": ['#1e91ff', '#975fe4', '#f2637b', '#fad337', "#4dcb73", "#13c2c2"],
            series: [
                {
                    name: typeArray[0],
                    type: 'line',
                    data: loginArray,
                    color: '#D94216',
                    // markPoint: {
                    //     data: [
                    //         {type: 'max', name: '最大值'}
                    //     ]
                    // },
                    // markLine: {
                    //     data: [
                    //         {type: 'average', name: '平均值'}
                    //     ]
                    // }
                },
                {
                    name: typeArray[1],
                    type: 'line',
                    data: visitArray,
                    color: '#1C84C6',
                    markPoint: {
                        data: [
                            {type: 'max', name: '最大值'}
                        ]
                    },
                    markLine: {
                        data: [
                            {type: 'average', name: '平均值'}
                        ]
                    }
                }
            ]
        };
        lineChart.setOption(lineoption);
        $(window).resize(lineChart.resize);
    }

    function search() {
        var startTime = $("#startTime").val();
        var endTime = $("#endTime").val();
        if (!startTime || !endTime) {
            $.modal.alert("请选择开始日期和结束日期");
            return;
        }
        $.modal.loading("加载中，请耐心等待！");
        $.ajax({
            type: "GET",
            url: ctx + "gy/deviceStatusAnaly/search",
            data: {
                startTime: $("#startTime").val(),
                endTime: $("#endTime").val()
            },
            dataType: "json",
            success: function (data) {
                console.log(data)
                initeEcharts(['登录用户数', '系统访问量'],data.dayLoginCountArray,data.dayVisitCountArray,data.rqArray);  //typeArray, h5Array, pcArray, dateArray
                $.modal.closeLoading();
            },
            error: {}
        });
    }

    function reset() {
        $.form.reset("dateForm");
    }

    function byuser_chart() {
        var shzlChart = echarts.init(document.getElementById("echarts-byuser-chart"));
        var option = {
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            tooltip: {
                trigger: 'item',
                color: '#4de6ff'
            },
            legend: {
                top: '5%',
                left: 'center',
                textStyle: {
                    color: '#fff',
                    fontSize: 14
                }
            },
            "color": ['#1e91ff', '#975fe4', '#f2637b', '#fad337', "#4dcb73", "#13c2c2"],
            series: [
                {
                    name: '数量',
                    type: 'pie',
                    radius: ['40%', '70%'],
                    center: ['50%', '60%'],
                    avoidLabelOverlap: false,
                    label: {
                        show: false,
                        position: 'center'
                    },
                    emphasis: {
                        label: {
                            show: false,
                            fontSize: 40,
                            fontWeight: 'bold'
                        }
                    },
                    labelLine: {
                        show: false
                    },
                    data: [[${byUserLoginAnaly}]]
                }
            ]
        };
        shzlChart.setOption(option);
        $(window).resize(shzlChart.resize);
    }


    function userByTimePieChart() {
        var shzlChart = echarts.init(document.getElementById("echarts-userByTime-chart"));
        var option = {
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            tooltip: {
                trigger: 'item',
                color: '#4de6ff'
            },
            legend: {
                top: '5%',
                left: 'center',
                textStyle: {
                    color: '#fff',
                    fontSize: 14
                }
            },
            "color": ['#1e91ff', '#975fe4', '#f2637b', '#fad337', "#4dcb73", "#13c2c2"],
            series: [
                {
                    name: '数量',
                    type: 'pie',
                    radius: ['40%', '70%'],
                    center: ['50%', '60%'],
                    avoidLabelOverlap: false,
                    label: {
                        show: false,
                        position: 'center'
                    },
                    emphasis: {
                        label: {
                            show: false,
                            fontSize: 40,
                            fontWeight: 'bold'
                        }
                    },
                    labelLine: {
                        show: false
                    },
                    data: [[${timeOperLogsData}]]
                }
            ]
        };
        shzlChart.setOption(option);
        $(window).resize(shzlChart.resize);
    }
</script>
</body>
</html>
